<template>
  <view class="product-detail-container">
    <view class="detail-banner">
      <imgsBanner
        :imgList="pcategoryList.big_images"
        :currentImg="currentImg"
      ></imgsBanner>
    </view>
    <view class="date-wrapper">
      <view class="date-label">
        <image
          class="icon"
          src="/static/images/mall/clock@2x.png"
          mode=""
        ></image>
        <text class="label">活动开始时间</text>
      </view>
      <text class="date">{{
        pcategoryList.activity.start_time | timeFormat
      }}</text>
    </view>
    <view class="order-info">
      <!-- <view class="collect-wrapper">
				<image class="star-icon" src="/static/images/mall/collect@2x.png" mode=""></image>
				<text class="star-label">收藏</text>
			</view> -->
      <view class="price-wrapper">
        <view class="original-price">
          <text>￥</text>
          <text>{{ pcategoryList.spec_items[0].price }}</text>
        </view>
        <view class="now-price">
          <text>￥</text>
          <text>{{ pcategoryList.spec_items[0].original_price }}</text>
        </view>
        <view class="sold">已售{{ pcategoryList.spec_items[0].stock | soldCount }}件</view>
      </view>
      <view class="tags">
        <block v-for="(item, index) in pcategoryList.tags" :key="index">
          <text v-if="index === 0" class="tag tag-item1">{{ item }}</text>
          <text v-else class="tag tag-item2">{{ item }}</text>
        </block>
      </view>
      <view class="name">{{ pcategoryList.spec_items[0].pname }}</view>
      <view class="services">
        <view class="services-item">
          <image src="/static/images/mall/icon-1@2x.png" mode=""></image>
          <text>支持预订</text>
        </view>
        <view class="services-item">
          <image src="/static/images/mall/icon-2@2x.png" mode=""></image>
          <text>极速退款</text>
        </view>
        <view class="services-item">
          <image src="/static/images/mall/icon-3@2x.png" mode=""></image>
          <text>在线咨询</text>
        </view>
        <view class="services-item">
          <image src="/static/images/mall/icon-4@2x.png" mode=""></image>
          <text>热情服务</text>
        </view>
      </view>
    </view>
    <view class="order-rich-text">
      <rf-parser :html="pcategoryList.intro" lazy-load></rf-parser>
    </view>
    <view class="evaluate"></view>
    <view class="footer">
      <view class="left">
        <view class="go-back" @click="goback">
          <button
            type="primary"
            class="text"
            style="
              background-color: #ffffff;
              color: #000000;
              font-size: 22upx;
              margin-left: -26upx;
            "
          >
            <image
              class="icon"
              src="/static/images/mall/mall@2x.png"
              mode=""
            ></image>
            <text style="display: block">商城</text>
          </button>
        </view>
        <view class="share" @click="clickShare()">
          <button
            type="primary"
            class="text"
            style="
              background-color: #ffffff;
              color: #000000;
              font-size: 22upx;
              margin-left: -26upx;
            "
            open-type="share"
          >
            <image
              class="icon"
              src="/static/images/mall/share@2x.png"
              mode=""
            ></image>
            <text style="display: block">分享</text>
          </button>
        </view>
        <view class="consult" @click="clickShare()">
          <button
            type="primary"
            class="text"
            style="
              background-color: #ffffff;
              color: #000000;
              font-size: 22upx;
              margin-left: -26upx;
            "
            open-type="contact"
          >
            <image
              class="icon"
              src="/static/images/mall/consult@2x.png"
              mode=""
            ></image>
            <text style="display: block">咨询</text>
          </button>
        </view>
      </view>
      <view class="go-buy" @click="toPayPage">立即购买</view>

      <loginDialog
        :isShow="isShowLogin"
        @goProtocol="goProtocol"
        v-on:decryptPhoneNumber="decryptPhoneNumber"
        v-on:dismiss="loginDismiss"
      ></loginDialog>
    </view>
  </view>
</template>

<script>
import imgsBanner from "@/pageA/imgsBanner-tag/imgsBanner-tag.vue";
import { loadVipinfo } from "@/api/user/user.js";
import moment from "dayjs";
import wxKeyManager from "@/util/getWXKey.js";
import { mapState } from "vuex";
import loginDialog from "@/components/login/login-dialog.vue";
import { EventBus } from "@/util/event-bus.js";

export default {
  components: {
    imgsBanner,
    loginDialog,
  },
  onLoad(options) {
    this.initData(options);
  },
  filters: {
    timeFormat(t) {
      if(!t) return "";
      return moment(t).format("MM/DD HH:mm");
    },
    soldCount(){
      const m = 100;
      const n = 15;
      return Math.floor(Math.random() * (m - n + 1)) + n;
    }
  },
  data() {
    return {
      pcategoryList: {},
      isShowLogin: false,
      //   loginDismiss: true
      // currentImg: 0, //当前默认选中
    };
  },
  onShareAppMessage(res) {
    return {
      title: this.pcategoryList.spec_items[0].pname,
      path: "/pageA/product-detail/product-detail?id=" + this.pcategoryList._id,
      imageUrl: this.pcategoryList.spec_items[0].thumbnail,
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  computed: {
    ...mapState("user", ["hasLogin"]),
  },
  methods: {
    loginDismiss() {
      this.isShowLogin = false;
    },
    decryptPhoneNumber(e) {
      let that = this;
      wxKeyManager.decryptPhoneNumber(e).then((res) => {
        that.isShowLogin = false;
        that.isLogin = true;
        EventBus.$emit("loginSuccess", true);
        that.didCustomize = (res.customized || false) == true;
      });
    },
    goProtocol(type) {
      uni.navigateTo({
        url: "/pageA/protocol/protocol?type=" + type,
      });
    },
    clickShare() {
      if (!uni.getStorageSync("token")) {
        uni.showToast({
          icon: "none",
          title: "请登录",
        });
        return;
      }
    },
    clickShang() {
      if (!uni.getStorageSync("token")) {
        uni.showToast({
          icon: "none",
          title: "请登录",
        });
        return;
      }
      uni.switchTab({
        url: "/pages/mall/mall",
      });
    },
    toPayPage() {
      if (!uni.getStorageSync("token")) {
        //   if(!this.hasLogin){
        // 	  this.isShowLogin = true;
        //   }
        this.isShowLogin = true;
        // uni.showToast({
        //   icon: "none",
        //   title: "请登录",
        // });
        return false;
      }
      this.$request
        .post({
          url: "order/immediatelyBuy",
          data: {
            p_id: this.pcategoryList.spec_items[0]._id,
            num: 1,
          },
        })
        .then((res) => {
          if (res.status === 1) {
            const id = res.data._id;
            loadVipinfo().then((res) => {
              if (res.status == 1) {
                uni.setStorageSync("vipInfo", res.data);
                getApp().globalData.vipInfo = res.data;
                console.log(
                  "this.globalData.vipInfo-------=",
                  getApp().globalData.vipInfo
                );
              }
            });

            uni.navigateTo({
              url: "/pageA/pay/pay?id=" + id,
            });
          } else {
          }
        });
    },
    goback() {
      uni.switchTab({
        url: "/pages/mall/mall",
      });
    },
    initData(options) {
      this.$request
        .get({
          url: "product/detail",
          data: {
            p_id: options.id,
          },
        })
        .then((res) => {
          if (res.status === 1) {
            const pcategoryList = res.data;
            this.pcategoryList = pcategoryList;
          }
        });
    },
  },
};
</script>
<style scoped lang="less">
button::after {
  border: none;
  background-color: none;
}
button {
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  // line-height: 1;
  -webkit-tap-highlight-color: transparent;
  color: #000000;
  background-color: #fff;
  width: 120rpx;
  height: 100%;
  font-size: 12px;
}

.product-detail-container {
  background-color: #f3f6f8;
  padding-bottom: 34upx;

  .detail-banner {
  }

  .date-wrapper {
    width: 750upx;
    height: 70upx;
    background: linear-gradient(
      135deg,
      rgba(252, 79, 145, 1) 0%,
      rgba(253, 108, 230, 1) 100%
    );
    padding: 0 32upx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30upx;

    .date-label {
      display: flex;
      align-items: center;

      .icon {
        width: 40upx;
        height: 40upx;
        margin-right: 10upx;
      }
    }
  }

  .order-info {
    background-color: #fff;
    padding: 32upx;
    position: relative;

    .collect-wrapper {
      position: absolute;
      right: 38upx;
      top: 48upx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .star-icon {
        width: 40upx;
        height: 40upx;
        margin-bottom: 10upx;
      }

      .star-label {
        color: #474a58;
        font-size: 26upx;
      }
    }

    .price-wrapper {
      display: flex;
      align-items: center;

      .original-price {
        font-size: 42upx;
        color: #ff5998;
        font-weight: 500;
        line-height: 58upx;
      }

      .now-price {
        font-size: 22upx;
        color: #8389a0;
        text-decoration: line-through;
        margin: 0 22upx;
      }

      .sold {
        font-size: 22upx;
        color: #8389a0;
      }
    }

    .tags {
      .tag {
        font-size: 22upx;
        line-height: 32upx;
        padding: 0 10upx;
        border-radius: 4px;
        margin-right: 10upx;
      }

      .tag-item1 {
        background: rgba(255, 170, 55, 0.1);
        color: #ffaa37;
        border: 2upx solid #ffaa37;
        background-color: ;
      }

      .tag-item2 {
        background: rgba(255, 89, 152, 0.1);
        color: #ff5998;
        border: 2upx solid #ff5998;
        background-color: ;
      }

      .tag-item3 {
        background: rgba(45, 142, 255, 0.1);
        color: #2d8eff;
        border: 2upx solid #2d8eff;
        // background-color: ;
      }
    }

    .name {
      color: #474a58;
      font-size: 32upx;
      font-weight: 500;
      line-height: 42upx;
      margin: 22upx 0;
      font-weight: 500;
    }

    .address {
      color: #8389a0;
      font-size: 26upx;
      line-height: 36upx;
      margin: 16upx 0 36upx 0;
    }

    .services {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #8389a0;
      font-size: 22upx;

      .services-item {
        display: flex;
        align-items: center;

        image {
          width: 32upx;
          height: 32upx;
          margin-right: 10upx;
        }
      }
    }
  }

  .pho {
    width: 100%;
    height: 300rpx;
  }

  .media-wrap {
    width: 100%;
  }

  .order-rich-text {
    background-color: #fff;
    margin: 12upx 0;
    padding: 32upx;

    .rich-title {
      color: #474a58;
      font-size: 34upx;
      line-height: 48upx;
      margin-bottom: 20upx;
    }
  }

  .evaluate {
    background-color: #fff;
    padding: 32upx;
    margin-bottom: 98upx;
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 98upx;
    border-top: 1upx solid #e9ebf0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2upx 0 34upx;

    .left {
      color: #474a58;
      font-size: 22upx;
      display: flex;
      align-items: center;

      .text {
        line-height: 32upx;
      }

      .text::after {
        border-radius: 98rpx;
        border: 0;
      }

      .go-back {
        display: flex;
        flex-direction: column;

        .icon {
          width: 40upx;
          height: 40upx;
          margin-bottom: 2upx;
        }
      }

      .share {
        display: flex;
        margin: 0upx 80upx;
        .share-now {
          margin-top: 10upx;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .icon {
          width: 40upx;
          height: 38upx;
          margin-bottom: 4upx;
        }
      }

      .consult {
        display: flex;
        flex-direction: column;

        .icon {
          width: 46upx;
          height: 46upx;
        }
      }
    }

    .go-buy {
      width: 178upx;
      height: 80upx;
      line-height: 80upx;
      text-align: center;
      background: linear-gradient(
        135deg,
        rgba(252, 79, 145, 1) 0%,
        rgba(253, 108, 230, 1) 100%
      );
      border-radius: 4upx;
      color: #fff;
      font-size: 34upx;
    }
  }
}
</style>
